<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kk programing</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <link href="../img/icon.png" rel="icon">
    <script type="text/javaScript" src="demo.js"></script>
</head>

<body onload="date()">
    <div class="main">
        <header>
            <button class="home_page" onclick="home_page()">home page</button>
            <div class="title">
                <div class="title_symbol"></div>
                <p id="p_inf_title">personal information</p>
                <div class="title_symbol"></div>
            </div>

            <div id="search">
                <form>
                    <input type="text" placeholder="search..." class="search">
                    <button type="button">搜索</button>
                </form>
            </div>
        </header>

        <div class="following">
            <!-- 左侧边栏 -->
            <aside id="left_aside">
                <div class="l_button">
                    <button id="点赞"></button>
                    <button id="评论"></button>
                    <button id="收藏"></button>
                    <button id="举报"></button>
                    <div></div>
                    <!--<p>分享</p>-->
                    <button id="微博"></button>
                    <button id="qq"></button>
                    <button id="微信"></button>
                </div>
            </aside>

            <!-- 主要内容 -->
            <div class="center">
                <div class="basic_contact">

                    <div class="in_info">
                        <div id="basic">
                            <div id="basic_img"></div>
                            <h1>Basic Info</h1>
                        </div>
                        <div class="box">
                            <div class="cla">生日：</div>
                            <div class="con">2nd,Oct 2002</div>
                        </div>
                        <div class="box">
                            <div class="cla">学校：</div>
                            <div class="con">HDU</div>
                        </div>
                        <div class="box">
                            <div class="cla">专业：</div>
                            <div class="con">软件工程</div>
                        </div>
                    </div>

                    <div class="in_info">
                        <div id="contact">
                            <div id="contact_img"></div>
                            <h1>Contact Info</h1>
                        </div>
                        <div class="box">
                            <div class="cla">QQ：</div>
                            <div class="con">2844359985</div>
                        </div>
                        <div class="box">
                            <div class="cla">Tel：</div>
                            <div class="con">19857449572</div>
                        </div>
                        <div class="box">
                            <div class="cla">E_mail：</div>
                            <div class="con">2844359985@qq.com</div>
                        </div>
                    </div>

                </div>


                <div class="out_info">
                    <div id="hobby">
                        <div id="hobby_img"></div>
                        <h1>Hobbies</h1>
                    </div>
                    <div class="box">
                        <div class="cla">爱听的音乐：</div>
                        <div class="con">jazzhiphop , r&b , soul , vapour wave</div>
                    </div>
                    <div class="box">
                        <div class="cla">口味：</div>
                        <div class="con">甜√ 辣×</div>
                    </div>
                    <div class="box">
                        <div class="cla">推荐的动漫：</div>
                        <div class="con">《大剑》,《恶魔人：crybaby》,《混沌武士》</div>
                    </div>
                    <div class="box">
                        <div class="cla">others：</div>
                        <div class="con">喜欢熬夜，喜欢敲代码，喜欢熬夜敲代码</div>
                    </div>
                </div>

                <div class="out_info">
                    <div id="about">
                        <div id="about_img"></div>
                        <h1>About</h1>
                    </div>
                    <div id="blog_con">
                        <p>我的blog对外开放是怎么回事呢？我的blog相信大家都很熟悉，但是我的blog对外开放是怎么回事呢，下面就让小编带大家一起了解吧。</p>
                        <p>我的blog对外开放，其实就是完成web前端作业，大家可能会很惊讶我的blog怎么会对外开放呢？但事实就是这样，小编也感到非常惊讶。</p>
                        <p>这就是关于我的blog对外开放的事情了，大家有什么想法呢，欢迎在评论区告诉小编一起讨论哦！</p>
                    </div>
                </div>

                <div class="out_info">
                    <div id="what">
                        <div id="what_img"></div>
                        <h1>What Here?</h1>
                    </div>
                    <div class="libra">
                        <div>
                            <h2>Constellation:</h2>
                        </div>

                        <div id="libra_img">
                            <img src="img/libra.png" width=50px>
                        </div>

                    </div>

                    <div class="mbti">
                        <div>
                            <h2>MBTI Type:</h2>
                        </div>

                        <div class="infj">
                            <p>INFJ</p>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 包括右侧边栏的一片内容 -->
            <aside id="right_aside">
                <nav>
                    <h2>navigation</h2>
                    <a href="#basic">basic</a>
                    <a href="#contact">contact</a>
                    <a href="#hobby">hobby</a>
                    <a href="#about">about</a>
                    <a href="#what">what</a>
                </nav>

            </aside>

        </div>

        <footer>
            <div id="menu_home">
                <img src="img/menu_home.png" width=20px height=20px>
            </div>
            <div>
                https://kkprograming.gitee.io/html
            </div>
        </footer>
    </div>
</body>

</html>